<template>
    <div class="updateForm">
        <el-form :label-position="labelPosition" label-width="150px" :model="addForm">
            <el-form-item label="position(位置码)" :required="true">
                <el-input v-model="addForm.position"></el-input>
            </el-form-item>
            <el-form-item label="图片描述" :required="true">
                <el-input v-model="addForm.description"></el-input>
            </el-form-item>
            <el-form-item label="排序(数字)" :required="true">
                <el-input v-model="addForm.sort"></el-input>
            </el-form-item>
            <imgUpload
                @uploaded="uploaded"
                @uploadFail="uploadFail"
                :size="2096"
                :urlTemp="addForm.url"
            ></imgUpload>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="$emit('closeDialog')">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
        </div>
    </div>
</template>

<script>
import imgUpload from "../imgUpload";
export default {
    name: "carouselAdd",
    props: [ "addTemp","urlTemp"],
    data() {
        return {
            labelPosition: "right",
            addForm: {
                url: "",
                position: "",
                description: "",
                sort: ""
            },
            imageUrl: "",
            // OldImageUrl: ""
            // uploadApi: "http://127.0.0.1:8000/api/img/uploadImg"
        };
    },
    watch: {
        addTemp:function(obj){
            console.log(obj);
            
            this.addForm={...obj};
            }
    },
    methods: {
        submit: async function() {
            let data = await this._axios
                .post("/ycwAdmin/carousel/add", this.addForm)
                .then(data => data.data);
            console.log(data);
            if (data) {
                this.$alert(`${data.msg}`, {
                    confirmButtonText: "确定",
                    callback: () => {
                        this.$message({
                            type: "warning",
                            message: `${data.msg}`
                        });
                        this.$emit("refresh");
                    }
                });
                // this.addForm = {
                //     phone: "",
                //     password: "",
                //     nickname: "",
                //     points: "",
                //     status: "",
                //     avatar_url: ""
                // };
            }
        },
        uploaded: function(res) {
            // console.log(this.OldImageUrl);
            // this.OldImageUrl = this.addForm.url;
            this.addForm.url = res.path;
        },
        uploadFail: function(res) {
            console.log(res);
            //上传错误处理
        }
    },
    components: {
        imgUpload
    }
};
</script>

<style lang="scss">
.updateForm {
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
}
</style>